import React from 'react';
import { Card } from 'antd';
import ShowMoreAnalysis from './showMoreAnalysis';

interface Props {
  title: string;
  value: number;
  periodPercent: string;
  periodValue: string;
  date: string;
}

const VisBasicCard: React.FC<Props> = ({ data }) => {

  const periodList = JSON.parse(data.data)
  if (!data.data || !periodList.length) return null;

  return (
    <div className={`space-y-4`}>
      {periodList.map((item, index) => {    
        const periodPercent = parseFloat(item.periodPercent) ?? 0;
        const isPositive = periodPercent > 0;    

        return (
          <Card 
            key={index} 
            className="rounded-lg shadow-sm hover:shadow-md transition-shadow"
            bodyStyle={{ padding: '16px' }}
          >
            <div className="space-y-2">
              {/* 标题 */}
              <div className="text-lg font-medium">
                {item.title || '-'}
              </div>

              {/* 金额和同比数据的行 */}
              <div className="flex justify-between items-center">
                <div className="text-2xl font-bold">
                   {item.value ?? 0}
                </div>               
                <div className={`text-2xl font-bold`}>
                  {isPositive ? '+' : ''}{item.periodValue ?? 0}
                </div>               
              </div>

              {/* 日期范围 */}
              <div className="flex justify-between items-center">
                  <div className="text-gray-500 text-sm">
                    日期：{item.date}
                  </div>
                  <span className={`font-bold ${isPositive ? 'text-red-500' : 'text-green-500'}`}>
                    {isPositive ? '+' : ''}{item.periodPercent} {isPositive ? '↑' : '↓'}
                  </span>
              </div>
            </div>

            <div className="flex justify-end">
              <ShowMoreAnalysis type={'yoy'} data={data} />
            </div>
            
          </Card>
        );
      })}
    </div>
  );
};

export default VisBasicCard;